<template>
    <view  class="businessP">

    <!-- 交易 -->

          <view  class="totle">
                <view class="totle-title" >总交易订单额</view>
                <view class="totle-content">
                    <view class="totle-content-item">
                    <view>¥{{userTransaction}}.00</view>
                    <view>当月个人总交易额</view>
                    </view>
                    <view class="totle-content-item">
                    <view>¥{{porxyTransaction}}0</view>
                    <view>当月代理总交易额</view>
                    </view>
                    <!-- <view class="totle-content-item">
                    <view>¥1987.00</view>
                    <view>买入宝总扣款</view>
                    </view> -->
                </view>
            </view>

            <view>
           <view class="classesifyP">
      <view class="classesify">
        <view :class="selectIfy==0?'classesify-puc':'classesify-pucs' "  @click="pucM" >个人</view>
        <!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

        <view class="classesify-buss" @click="busM" v-if="selectIfy ==1">代理</view>
         <view class="classesify-bus"  @click="busM" v-else>代理</view>
      </view>
    </view>
            </view>

          <view  class="allDataP">

          <view class="tabwiperC" >
             
             <u-tabs-swiper
      ref="tabs"
      :list="list"
      name="ruleName"
      active-color="#4dbf92"
      inactive-color=""
      :is-scroll="false"
      :current="current"
      bar-width='80'
      gutter='80'
      @change="tabsChange"
    ></u-tabs-swiper>
          </view>

    <swiper
    :style="{ height: showSwiperLength+'vh'}"
      :current="swiperCurrent"
      @animationfinish="animationfinish"
    >
      <swiper-item
        :style="{ height: '100%' }"
        v-for="(item, index) in comList"
        :key="index"
      >
      
       <scroll-view  ref="scrollView" scroll-y @scrolltolower="onreachBottom">
         <view class="totle-price" >
         <view class="totle-price-text" >
          总交易额：<span>{{totleNumber}}</span>
         </view>

         <view    @click="selectTimeM"  :style="{ display:'flex', justifyContent:'center' ,alignItems:'center' ,backgroundColor:'white', borderRadius:'5px',padding:'0.5rem' }" >
         <image :style="{  width:'1rem',height:'1rem' }" src="../../style/image/stati/A33.png" alt="">
         <view :style="{ fontSize:'0.6rem', padding:'0rem 0rem 0rem 0.5rem' }"  >{{selectTime}}</view>
         </view>

      </view>
      <view  class="seniorityPP" >

      <view class="seniorityP" v-for="(item,index) in showData " :key="index" >
            <view class="seniority-item">
            <view :style="{ display:'flex' }" >
             
               <view>
                <view class="srotBotton"  >
                 <image v-if="index==0" :style="{  width:'1rem',height:'1rem' }" src="../../style/image/stati/king.png" alt="">
                 <image v-if="index==1" :style="{  width:'1rem',height:'1rem' }" src="../../style/image/stati/silver.png" alt="">
                  <image v-if="index==2" :style="{  width:'1rem',height:'1rem' }" src="../../style/image/stati/bronze.png" alt="">
                </view>
               <u-avatar :src="item.headImg" mode="circle" :show-sex='true' ></u-avatar>
                </view>
                <view :style="{ padding:'0rem 1rem',display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'space-around' }" >
                <view  class="seniority-s" >{{item.name}}</view>
                <view class="seniority-p" >{{item.phone}}</view>
                </view>
            
            </view>
                <view class="seniority-price" >¥{{item.money}}.00</view>
            </view>
      </view>

       

       <view style="margin-top:2rem">
         <u-empty  v-if="showData.length==0" text="暂无数据" mode="data"></u-empty>
       </view>

      </view>
        </scroll-view> 
      </swiper-item>
    </swiper>
            
            </view>

                <u-popup v-model="popupShow" mode="bottom">

           
              <view>
               <view style="text-align: center;margin: 1rem 0rem 0rem 0rem;" >请选择筛选类型:</view>

               <view class="classesifyP">
                
      <view class="classesify">
        <view :class="timeSelectIfy==1?'classesify-puc':'classesify-pucs' "  @click="timePucM" >按月</view>
        <!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

        <view class="classesify-buss"  @click="timeBusM" v-if="timeSelectIfy == 2">按日</view>
         <view  class="classesify-bus"  @click="timeBusM" v-else>按日</view>
      </view>
    </view>
            </view>
		</u-popup>

       <u-picker v-model="pickerShow"  @confirm="pickerConfirm"  mode="time"></u-picker>

       <u-select v-model="selectShow"  :default-value=[10,10] mode="mutil-column" :list="timeList" @confirm="selectConfirm"></u-select>

    </view>

</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import {
  transactionStatistics,
  userTransaction,
  findProfitRuleList,
} from "../../utils/uniApi";
@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public src = "";


  public userTransaction=''
  public porxyTransaction=''

  public list = [
    {
      ruleName: "总数据",
      id: "",
    },
  ];

  public totleNumber=''
  public comList = ["TotalDataZ", "Income", "Buniness", "Firm"];

  public current = 0;     // tabs组件的current值，表示当前活动的tab选项

  public swiperCurrent = 1;

  public selectIfy: any =0;

  public showSwiperLength = 40; // 45;

  public showData = [
    "13612345677",
    "13612345677",
    "13612345677",
    "13612345677",
    "13612345677",
    "13612345677",
    "13612345677",
    "13612345678",
  ];

  public profitRuleId: any ='' //分润规则ID
  public userType=0



  public selectTime: any = "请选择日期";

  public timeSelectIfy: any = 0;
  public popupShow: boolean = false;
  public pickerShow = false;
  public selectShow = false;

  public show = false;

    //日期
  public dateTime = "";
  public dateType: string = "month"; //month 按月查询,day 按天查询


  public timeList = [
    [
      {
        value: "1",
        label: "2010",
      },
      {
        value: "2",
        label: "2011",
      },
      {
        value: "3",
        label: "2012",
      },
      {
        value: "4",
        label: "2013",
      },
      {
        value: "5",
        label: "2014",
      },
      {
        value: "6",
        label: "2015",
      },
      {
        value: "7",
        label: "2016",
      },
      {
        value: "8",
        label: "2017",
      },
      {
        value: "9",
        label: "2018",
      },
      {
        value: "10",
        label: "2019",
      },
      {
        value: "11",
        label: "2020",
      },
      {
        value: "12",
        label: "2021",
      },
    ],
    [
      {
        value: "13",
        label: "1",
      },
      {
        value: "14",
        label: "2",
      },
      {
        value: "15",
        label: "3",
      },
      {
        value: "16",
        label: "4",
      },
      {
        value: "17",
        label: "5",
      },
      {
        value: "18",
        label: "6",
      },
      {
        value: "19",
        label: "7",
      },
      {
        value: "20",
        label: "8",
      },
      {
        value: "21",
        label: "9",
      },
      {
        value: "22",
        label: "10",
      },
      {
        value: "23",
        label: "11",
      },
      {
        value: "24",
        label: "12",
      },
    ],
  ];

  created() {
    // alert(123)
    uni.showLoading({
      title: "加载中",
    });

     uni.setStorage({
        key: "staticCurrent",
        data: 2,
        success: function () {
        },
      });

    this.nowDate()

    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
    };

    transactionStatistics(params).then((res:any) => {
      console.log("交易---头部--res", res);

           this.userTransaction =res.data.data.userTransaction
           this.porxyTransaction= res.data.data.porxyTransaction

      uni.hideLoading();
    });

    this.accrodingBarM();
  }
  
  onreachBottom(){
	  
	  
  }
  onHide(){
  	  uni.hideLoading();
  }

  nowDate(){
  
     let datas= new Date()
  function formatDate(datas:any) { 
var myyear = datas.getFullYear(); 
var mymonth = datas.getMonth()+1; 
var myweekday = datas.getDate(); 

if(mymonth < 10){ 
mymonth = "0" + mymonth; 
} 
if(myweekday < 10){ 
myweekday = "0" + myweekday; 
} 
return (myyear+"-"+mymonth + "-" + myweekday); 
} 

    console.log( formatDate(datas),'日期日期日期' )

    this.selectTime=formatDate(datas).split('-')[0]+'-'+formatDate(datas).split('-')[1]

  }

  accrodingBarM() {
    uni.showLoading({
      title: "加载中",
    });

    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
    };
    findProfitRuleList(params)
      .then((res: any) => {
        console.log(res, "交易列表--头部");

        // res.data.data.filter((item: any, index: any) => {
        //   this.list.push(item);
        // });




        this.list=res.data.data

      })
      .then(() => {
         var obj= {
      ruleName: "总数据",
      id: "",
           }
        this.list.unshift(obj)
        setTimeout(() => {
          uni.hideLoading();
        }, 500);

        this.accrodingM();
      });
  }

  accrodingM() {
    this.showData = [];

    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
      dateTime:this.selectTime, //	查询时间
      dateType:this.dateType, //	查询类型
      profitRuleId: this.profitRuleId, //分润规则ID
      userType:this.userType, // ("0" 个人 ,"1" 代理)
    };
    userTransaction(params)
      .then((res: any) => {
        console.log(res, "交易列表");

                this.totleNumber=res.data.data.transactionSum

        console.log(res.data,this.totleNumber,'this.totleNumber')


        this.showData = res.data.data.list;
		console.log(this.showData,'+++this.showData')
      })
      .then(() => {

        this.showSwiperLength = this.showData.length * 10 + 50;

      });
  }
  

  busM() {
    //方法中获取this
    this.selectIfy = 1;

    this.userType=1
    this.accrodingM()

  }

  pucM() {
    console.log(12312312);
    this.selectIfy = 0;

    this.userType=0

    console.log('geren ')
    this.accrodingM()


  }

  tabsChange(index: any) {

    console.log("点击", index);
    this.current = index;
    this.swiperCurrent = index;

    this.list.filter((itemd: any, indexd: any) => {
      if (index == indexd) {
        console.log("选中的元素", itemd);
        let dataed = itemd.id;
        console.log(dataed, "dataed");
        this.profitRuleId = dataed;

        this.accrodingM();
      }
    });
  }

  animationfinish(data: any) {
    console.log("qiehuan");
    this.current = data.target.current;
    this.swiperCurrent = data.target.current;

    this.list.filter((itemd: any, indexd: any) => {
      if ( data.target.current == indexd) {
        console.log("选中的元素", itemd);
        let dataed = itemd.id;
        console.log(dataed, "dataed");
        this.profitRuleId = dataed;

        this.accrodingM();
      }
    });
  }



  // 日期选择

  selectTimeM() {
    this.popupShow = !this.show;
  }

  pickerConfirm(data: any) {
    console.log("按日起", data);
    this.selectTime = data.year + "-" + data.month + "-" + data.day;

    this.dateType = "day";
    this.dateTime = data.year + "-" + data.month + "-" + data.day;

    this.accrodingBarM()
  }

  selectConfirm(data: any) {
    console.log(data);

    let str = (data[0] as any).label + "-" + (data[1] as any).label;

    this.selectTime = str;
    console.log(str);

    this.dateType = "month";
    this.dateTime = str;

    this.accrodingBarM()

    // this.accordingM()
  }

  timeBusM() {
    //方法中获取this
    this.timeSelectIfy = 2;

    this.popupShow = false;
    this.pickerShow = true;

    setTimeout(() => {
      this.timeSelectIfy = 0;
    }, 1000);
  }

  timePucM() {
    console.log(12312312);
    this.timeSelectIfy = 1;

    this.popupShow = false;
    this.selectShow = true;

    setTimeout(() => {
      this.timeSelectIfy = 0;
    }, 1000);
  }
  
}
</script>

<style  lang="scss"  scoped>
scroll-view ::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.seniorityPP{
margin-top: 0.1rem;
}
.totle-title {
  padding: 0.8rem;
  text-align: center;
  font-size: 1rem;
  color: white;
}
.totle {
  background: #02b074;
  box-shadow: 0rem 0rem 1rem 0rem rgba(2, 176, 116, 0.3);
  border-radius: 0.4rem;
  margin: 1rem;
}
.totle-content {
  border-bottom-right-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
  background-color: white;

  justify-content: space-between;
  display: flex;
  padding: 1rem;
}
.totle-content-item {
  width: 33.3%;
  text-align: center;
}

.totle-content-item :first-child {
  font-size: 0.95rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
}

.totle-content-item :nth-child(2) {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 399;
}

.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 2rem 0rem;
}

.classesify {
  width: 6rem;
  height: 1.8rem;
  border: 1px solid #02af74;

  display: flex;
  align-items: center;
  border-radius: 10px;
  /* //   background-color: red; */
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;

  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.tabwiperC {
  margin: 1rem 0rem 0rem 0rem;
  border-top: 1px solid #dbdbdb;
}

.seniority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dbdbdb;
  padding: 0.5rem;
}
.seniority-price {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 399;
  color: #000000;
}
.seniority-s {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.seniority-p {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #000000;
}
.totle-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f3f5f7;
  padding: 0.3rem 0.5rem;
}
.totle-price-text {
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.totle-price-text span {
  font-size: 0.73rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #000000;
}


.srotBotton{
width: 0.8rem;
height: 1rem;
position: absolute;
z-index: 9;
left: 0;
}
</style>